const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
  entry: path.resolve(__dirname, '../src/index.js'),
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, '../build'),
    // publicPath: path.resolve(__dirname, '../build')
    publicPath: '/'
  },
  module: {
    rules: [
      {
        /** css文件loader */
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        /** less文件loader */
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        /** 针对所有的图片的加载器 */
        test: /\.(jpg|png|gif|jpeg)$/,
        /**webpack4.x 的写法 */
        // loader: 'url-loader',
        // options: {
        // /**
        //  * 当图片小于8kb 时，解析成base64的图片，减少http请求次数，直接和css混合在一起
        //  * 当然这其实也不算是一种优化，css文件的体积会变大，这样也导致在生成cssom树时时间会大大增加
        //  */
        // limit: 8 * 1024,
        // esModule: false,
        // /**对打包图片的名称长度做一下限制 */
        // name: "img/[name].[hash:8].[ext]"
        // }

        /**webpack5.x 的写法 废弃了url-loader */
        type: "asset",
        //解析
        parser: {
          //转base64的条件
          dataUrlCondition: {
            maxSize: 8 * 1024, // 25kb
          }
        },
        generator: {
          //与output.assetModuleFilename是相同的,这个写法引入的时候也会添加好这个路径
          filename: 'img/[name].[hash:6][ext]',
          //打包后对资源的引入，文件命名已经有/img了
          // publicPath: './'
        },
      },
      {
        test: /\.html$/,
        /**处理html文件的img图片，从而能被url-loader 处理 */
        loader: 'html-loader'
      },
      // {
      //   /**其他资源使用file-loader */
      //   exclude: /\.(js|html|less|css|jpg|png|jpeg|gif)$/,
      //   loader: 'file-loader',
      //   options: {
      //     name: '[hash:8].[ext]'
      //   }
      // }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    /** html模板插件 */
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, '../src/index.html')
    }),
  ],
  mode: 'development',
  devServer: {
    /**基础内容路径，我们就在build这个文件下 */
    contentBase: path.resolve(__dirname, '../build'),
    /**开启gzip压缩，体积小 */
    compress: true,
    /**端口号 3000 */
    port: 3000,
    /**自动打开默认浏览器 */
    open: true,
    host: 'localhost'
  }
}